<template>
	<div class="app-container">
		<el-dialog :title="title" v-model="open" width="75%" append-to-body>
				<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
					<el-form-item label="文章标题" prop="contentTitle">
						<el-input v-model="queryParams.contentTitle" placeholder="请输入" clearable @keyup.enter="handleQuery"/>
					</el-form-item>
					<el-form-item label="关键字" prop="contentKeyword">
						<el-input v-model="queryParams.contentKeyword" placeholder="请输入" clearable @keyup.enter="handleQuery"/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>

				<el-table v-loading="loading" :data="cmContentList">
					<el-table-column label="所属栏目" align="center" prop="categoryId" v-if="columnVisible('categoryId')"/>
					<el-table-column label="文章标题" align="center" prop="contentTitle" v-if="columnVisible('contentTitle')"/>
					<el-table-column label="缩略图" align="center" prop="contentImg" width="100" v-if="columnVisible('contentImg')">
						<template #default="scope">
							<image-preview :src="scope.row.contentImg" :width="50" :height="50"/>
						</template>
					</el-table-column>
					<el-table-column label="关键字" align="center" prop="contentKeyword" v-if="columnVisible('contentKeyword')"/>
					<el-table-column label="文章内容" align="center" prop="contentDetails" v-if="columnVisible('contentDetails')"/>
					<el-table-column label="文章描述" align="center" prop="contentDescription" v-if="columnVisible('contentDescription')"/>
					<el-table-column label="文章点击次数" align="center" prop="contentHit" v-if="columnVisible('contentHit')"/>
					<el-table-column label="虚拟点击次数" align="center" prop="contentHitVirtual" v-if="columnVisible('contentHitVirtual')"/>
					<el-table-column label="文章作者" align="center" prop="contentAuthor" v-if="columnVisible('contentAuthor')"/>
					<el-table-column label="排序" align="center" prop="sort" v-if="columnVisible('sort')"/>
					<el-table-column label="是否推荐" align="center" prop="isRecommend" v-if="columnVisible('isRecommend')">
						<template #default="scope">
							<dict-tag :options="sys_yes_no" :value="scope.row.isRecommend"/>
						</template>
					</el-table-column>
					<el-table-column label="状态" align="center" prop="status" v-if="columnVisible('status')">
						<template #default="scope">
							<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" disabled ></el-switch>
						</template>
					</el-table-column>
					<el-table-column label="归属部门" align="center" prop="deptId" v-if="columnVisible('deptId')">
						<template #default="scope">
							<span>{{ deptName(scope.row.deptId) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="备注" align="center" prop="remark" v-if="columnVisible('remark')"/>
					<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
						<template #default="scope">
							<el-button link type="primary" icon="View" @click="confirmSelect(scope.row)">选择</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList"/>
		</el-dialog>
	</div>
</template>

<script setup name="ContentSelect">
import {listCmContent, getCmContent, delCmContent, addCmContent, updateCmContent} from "@/api/cm/cmContent";
import {checkPermi} from "@/utils/permission.js";
import ContentForm from "@/views/cm/cmContent/form.vue";

const {proxy} = getCurrentInstance();
const {sys_data_status, sys_yes_no} = proxy.useDict('sys_data_status', 'sys_yes_no');

import useUserStore from "@/store/modules/user";

const userStore = useUserStore();

const cmContentList = ref([]);
const isEdit = ref(false);
const isInsert = ref(false);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
// 列显隐信息(able表示列是否可用，visible用于用户控制显隐)
const columns = ref([
	{label: `id`, able: false, visible: false, key: 'id'},
	{label: `所属栏目`, able: true, visible: true, key: 'categoryId'},
	{label: `文章标题`, able: true, visible: true, key: 'contentTitle'},
	{label: `缩略图`, able: true, visible: true, key: 'contentImg'},
	{label: `关键字`, able: true, visible: true, key: 'contentKeyword'},
	{label: `文章内容`, able: false, visible: true, key: 'contentDetails'},
	{label: `文章描述`, able: false, visible: true, key: 'contentDescription'},
	{label: `文章点击次数`, able: true, visible: true, key: 'contentHit'},
	{label: `虚拟点击次数`, able: false, visible: true, key: 'contentHitVirtual'},
	{label: `文章作者`, able: true, visible: true, key: 'contentAuthor'},
	{label: `排序`, able: false, visible: true, key: 'sort'},
	{label: `是否推荐`, able: true, visible: true, key: 'isRecommend'},
	{label: `删除标志`, able: false, visible: false, key: 'delFlag'},
	{label: `状态`, able: true, visible: true, key: 'status'},
	{label: `归属部门`, able: true, visible: true, key: 'deptId'},
	{label: `创建者`, able: false, visible: false, key: 'createBy'},
	{label: `创建时间`, able: false, visible: false, key: 'createTime'},
	{label: `更新者`, able: false, visible: false, key: 'updateBy'},
	{label: `更新时间`, able: false, visible: false, key: 'updateTime'},
	{label: `备注`, able: true, visible: true, key: 'remark'},
]);

const data = reactive({
	form: {},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		params: {},
		categoryId: null,
		contentTitle: null,
		contentKeyword: null,
		contentHit: null,
		contentHitVirtual: null,
		contentAuthor: null,
		sort: null,
		isRecommend: null,
		status: null,
		deptId: null,
	},
});

const {queryParams, form, rules} = toRefs(data);

/** 列显隐 */
function columnVisible(key) {
	return proxy.checkColumn(columns.value, key);
}

/** 查询文章管理列表 */
function getList() {
	loading.value = true;
	listCmContent(queryParams.value).then(response => {
		cmContentList.value = response.rows;
		total.value = response.total;
		loading.value = false;
		if (categoryType.value && categoryType.value == 1) {
			if (response.rows && response.rows.length) {
				form.value = response.rows[0] || {}
				isEdit.value = true;
			} else {
				reset();
				isInsert.value = true;
			}
		}
	});
}

/** 确认选择 */
function confirmSelect(row) {
	proxy.$emit("confirmSelect", row);
	open.value = false;
}

/** 显示弹窗 */
function show() {
	open.value = true;
	if (!contentList.value || !contentList.value.length) {
		getList();
	}
}

defineExpose({
	show
})


/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

getList();
</script>
